<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理</title>
</head>
<body>
    <h1>学生管理</h1>
    <div>
        <h3>增加学生</h3>
        <form action="#">
            <div>
                <label for="addName">姓名：</label>
                <input id="addName" type="text">
            </div>
            <div>
                <label for="addAge">年龄：</label>
                <input id="addAge" type="text">
            </div>
            <div>
                <label>性别：</label>
                <input name="addGender" type="radio" value="男"><label>男</label>
                <input name="addGender" type="radio" value="女"><label>女</label>
            </div>
            <div>
                <input id="addBtn" type="button" value="增加" >
            </div>
        </form>
    </div>
    <div>
        <h3>修改学生</h3>
        <form action="#">
            <input id="updateId" type="hidden" >
            <div>
                <label for="updateName">姓名：</label>
                <input id="updateName" type="text">
            </div>
            <div>
                <label for="updateAge">年龄：</label>
                <input id="updateAge" type="text">
            </div>
            <div>
                <label>性别：</label>
                <input name="updateGender" type="radio" value="男"><label>男</label>
                <input name="updateGender" type="radio" value="女"><label>女</label>
            </div>
            <div>
                <input id="updateBtn" type="button" value="修改">
            </div>
        </form>
    </div>
    <div>
        <div>
            <select id="searchType">
                <option value="name">姓名</option>
                <option value="gender">性别</option>
                <option value="age">年龄</option>
            </select>
            <input id="searchValue" type="text">
            <input id="searchBtn" type="button" value="搜索">
        </div>
        <table border="1">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tbody">
                
            </tbody>
        </table>
    </div>
    <input id="generateBtn" type="button" value="随机生成数据" >
    <script src="../js/mock-min.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../lesson13/data.js"></script>
    <script src="./ajax.js"></script>
    <script>
        async function show(type,value){
            let res = await ajax({
                type:"post",
                url:"/findStudents",
                data:{
                    type,value
                }
            });
            render(res.students);

        }
        function render(arr){
            let str = "";
            for(let i = 0;i < arr.length;i++){
                str += `<tr>
                        <td>${arr[i].name}</td>
                        <td>${arr[i].gender}</td>
                        <td>${arr[i].age}</td>
                        <td>
                            <input data-id="${arr[i].id}" type="button" value="修改">
                            <input data-id="${arr[i].id}" type="button" value="删除">
                        </td>
                    </tr>`;
            } 
            $("#tbody").html(str);
        }
        show();
        // 增加学生
        $("#addBtn").click(async function(){
            let name = $("#addName").val();
            let age = $("#addAge").val();
            let gender = $("[name=addGender]:checked").val();
            let res = await ajax({
                type:'post',
                url:'/addStudent',
                data:{
                    name,gender,age
                }
            });
            alert("增加成功");
            show();
        })
        $("#tbody").click(async function(e){
            console.log($(e.target).attr("data-id"));
            if(e.target.value == "删除"){
                if(confirm("是否删除？")){
                    await ajax({
                        type:"post",
                        url:"/delStudent",
                        data:{
                            id:e.target.dataset.id
                        }
                    });
                    alert("删除成功");
                    show();
                }
            }else if(e.target.value == "修改"){
                let res = await ajax({
                    type:"post",
                    url:"/findById",
                    data:{
                        id:e.target.dataset.id
                    }
                });
                $("#updateId").val(res.student.id);
                $("#updateName").val(res.student.name);
                $("#updateAge").val(res.student.age);
                $(`[name=updateGender][value=${res.student.gender}]`).prop("checked",true);
                
            }
        })
        // updateBtn.onclick = async function(){
        //     let gender = "";
        //     let name = updateName.value;
        //     let age = updateAge.value;
        //     let id = updateId.value;
        //     for(let i = 0;i < updateGender.length;i++){
        //         if(updateGender[i].checked){
        //             gender = updateGender[i].value;
        //         }
        //     }
        //     let res = await ajax({
        //         type:'post',
        //         url:'/updateStudent',
        //         data:{
        //             id,name,gender,age
        //         }
        //     });
        //     alert("修改成功");
        //     show();
        // }
        // document.getElementById("generateBtn").onclick = function(){
        //     let obj = Mock.mock({
        //         "students|10":[{
        //             'id|+1':1,
        //             'name':'@cname',
        //             'gender':/[男女]/,
        //             'age|20-30':1
        //         }]
        //     });
        //     let oldStudents = JSON.parse(localStorage.getItem('students') || "[]");
        //     localStorage.setItem("students",JSON.stringify([...oldStudents,...obj.students]));
        // }
        // // 搜索
        // searchBtn.onclick = async function(){
        //     let type = searchType.value;
        //     let value = searchValue.value;
        //     show(type,value);
            
        // }
    </script>
</body>
</html>